import React from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import { useTheme } from './ThemeContext';

export function ThemeToggle() {
  const { theme, themeMode, setThemeMode } = useTheme();

  return (
    <View style={[styles.container, { backgroundColor: theme.colors.card }]}>
      <TouchableOpacity
        style={[
          styles.option,
          themeMode === 'light' && { backgroundColor: theme.colors.primary }
        ]}
        onPress={() => setThemeMode('light')}
      >
        <MaterialIcons
          name="wb-sunny"
          size={24}
          color={themeMode === 'light' ? '#fff' : theme.colors.text}
        />
        <Text
          style={[
            styles.optionText,
            { color: themeMode === 'light' ? '#fff' : theme.colors.text }
          ]}
        >
          浅色
        </Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={[
          styles.option,
          themeMode === 'dark' && { backgroundColor: theme.colors.primary }
        ]}
        onPress={() => setThemeMode('dark')}
      >
        <MaterialIcons
          name="nights-stay"
          size={24}
          color={themeMode === 'dark' ? '#fff' : theme.colors.text}
        />
        <Text
          style={[
            styles.optionText,
            { color: themeMode === 'dark' ? '#fff' : theme.colors.text }
          ]}
        >
          深色
        </Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={[
          styles.option,
          themeMode === 'system' && { backgroundColor: theme.colors.primary }
        ]}
        onPress={() => setThemeMode('system')}
      >
        <MaterialIcons
          name="settings-brightness"
          size={24}
          color={themeMode === 'system' ? '#fff' : theme.colors.text}
        />
        <Text
          style={[
            styles.optionText,
            { color: themeMode === 'system' ? '#fff' : theme.colors.text }
          ]}
        >
          跟随系统
        </Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    borderRadius: 12,
    padding: 8,
    marginHorizontal: 16,
  },
  option: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 8,
    borderRadius: 8,
    marginHorizontal: 4,
  },
  optionText: {
    marginLeft: 4,
    fontSize: 14,
    fontWeight: '500',
  },
}); 